<template>
  <div class="area-select">
    <Drawer
      ref="modal"
      :title="$t('devicesAreaSelect.devAreSel')"
      :width="500"
      :value="show"
      :beforeClose="$_modal_decideIfClose"
    >
      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="$_page_pageChange"
        @on-page-size-change="$_page_pageSizeChange"
      />
    </Drawer>
  </div>
</template>

<script>
import {
  getList,
} from '@/api/area.js'

import modalMixin from '@/utils/mixins/modalMixin.js'
import pageMixin from '@/utils/mixins/pageMixin.js'

export default {
  mixins: [
    modalMixin,
    pageMixin,
  ],

  props: {
    asCb: Function,
  },
  data () {
    return {
      selection: [],
      list: [],
      columns: [
        {
          title: this.$t('devicesAreaSelect.devAreName'),
          key: 'areaName',
        },
        {
          title: this.$t('devicesAreaSelect.devAreOperation'),
          key: 'settings',
          width: 90,
          render: (h, { row }) => {
            return h('a', {
              on: {
                click: () => this.handleSelecctConfirm(row),
              },
            }, this.$t('devicesAreaSelect.devAreTableSel'))
          },
        },
      ],
    }
  },

  mounted () {
    this.show = true
    this.$_page_update()
  },

  methods: {
    handleSelecctConfirm (item) {
      this.$Modal.confirm({
        title: this.$t('devicesIndex.devdevStrBindR'),
        content: this.$t('devicesIndex.devdevStrBindS') + item.areaName + this.$t('devicesIndex.devdevStrBindn'),

        onOk: async () => {
          console.log(this.asCb)
          if (this.asCb && typeof this.asCb === 'function') {
            await this.asCb(item.id)
          }
          this.ifUpdateUpper = true
          this.$_modal_close()
        },
      })
    },

    async getData (query) {
      const { success, data } = await getList({
        page: query.page,
        limit: query.pageSize,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        list = data.data
        page = data.pageNum || 1
        total = data.count
      }
      this.list = list
      this.page = page
      this.pageSize = query.pageSize
      this.total = total
    },
  },
}
</script>
